<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="24">
				<div style="height: 0.5em;"></div>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">选择年:</p>
			</el-col>
			<el-col :span="4">
				<div class="block">
					<el-date-picker size="small" v-model="sectyear" format="yyyy" :editable=false align="right" type="year" placeholder="选择年" @change="selectYear">
					</el-date-picker>
				</div>
			</el-col>

			<el-col :span="18" style="padding-left: 0px;text-align: right;">
				<el-button type="primary" size="small" v-on:click='createAnnalOutVal'>系统计算</el-button>
				<el-button type="primary" size="small" v-on:click='AnnalOutValEdit'>人工修正</el-button>
			</el-col>

			<el-col :span="24">
				<el-table :data="tableData.dataList" border @selection-change="handleSelectionChange" style="width: 100%;align-content: center;">
					<el-table-column type="selection" width="55">
					</el-table-column>
					<el-table-column label="基盘年度" prop="baseTime">
					</el-table-column>
					<el-table-column label="预测年" prop="year">
					</el-table-column>
					<el-table-column label="车型" prop="carType">
					</el-table-column>
					<el-table-column label="车龄" prop="carAge">
					</el-table-column>
					<el-table-column label="消费类别" prop="consumptionType">
					</el-table-column>
					<el-table-column label="预计车辆" prop="carNum">
					</el-table-column>
					<el-table-column label="年均工单数" prop="workorderNum">
					</el-table-column>
					<el-table-column label="平均单次产值" prop="averageCz">
					</el-table-column>
				    <el-table-column label="年度计产值" prop="yearCZ">
				    </el-table-column>
				</el-table>
				<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
				</el-pagination>
			</el-col>
		</el-row>
		<el-dialog v-model="dialogform">
			<el-form :model="dataFormModelData" label-width="100px" ref="datamodelForm" :rules="modelRule">
				<el-form-item label="基盘年度:" prop="baseTime">
					<el-input size="small" v-model="dataFormModelData.baseTime" readonly></el-input>
				</el-form-item>
				<el-form-item label="预测年:" prop="year">
					<el-input size="small" v-model="dataFormModelData.year" readonly></el-input>
				</el-form-item>
				<el-form-item label="车型:" prop="carType">
					<el-input size="small" v-model="dataFormModelData.carType" readonly></el-input>
				</el-form-item>
				<el-form-item label="车龄:" prop="carAge">
					<el-input size="small" v-model="dataFormModelData.carAge" readonly></el-input>
				</el-form-item>
				<el-form-item label="消费类别:" prop="consumptionType">
					<el-input size="small" v-model="dataFormModelData.consumptionType" readonly></el-input>
				</el-form-item>
				<el-form-item label="预计车辆:" prop="carNum">
					<el-input size="small" v-model="dataFormModelData.carNum" readonly></el-input>
				</el-form-item>
				<el-form-item label="年均工单数:" prop="workorderNum">
					<el-input-number v-model="dataFormModelData.workorderNum" :min="0"></el-input-number>
				</el-form-item>
				<el-form-item label="平均单次产值:" prop="averageCz">
					<el-input-number v-model="dataFormModelData.averageCz" :min="0"></el-input-number>
				</el-form-item>
				<el-form-item label="年度计产值:" prop="yearCZ">
					<el-input-number v-model="dataFormModelData.yearCZ" :min="0"></el-input-number>
				</el-form-item>
				<!--<el-form-item label="流失率:" prop="loss">
					<el-input-number v-model="dataFormModelData.loss" :min="0" :max="100"></el-input-number>
				</el-form-item>
				<el-form-item label="增长率:" prop="increase">
					<el-input-number v-model="dataFormModelData.increase" :min="0" :max="100"></el-input-number>
				</el-form-item>-->
			</el-form>
			<div slot="footer" 
				class="dialog-footer">
				<el-button type="primary" 
					@click="AnnalOutValSave">提交</el-button>
				<el-button @click="dialogform = false">关闭</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import moment from 'moment'
	import echarts from 'echarts'
	export default {
		data: function() {
			return {
				dialogform: false,
				//页码数
				CurentPage: 1,
				//每页的数量
				page: this.page,
				//回访月报数据
				tableData: {
					total: 0,
					dataList: []
				},
				//表单初始值
				emptyData: {
					baseTime: '', //基盘年度
					year: '', //当前年
					carType: '', //车型
					carAge: '', //车龄
					consumptionType: '', //消费类别 
					carNum:'',
					workorderNum: '', //年均工单数 
					averageCz: '', //平均单次产值 	
					yearCZ:'',
				},
				//表单数据
				dataFormModelData: {
					baseTime: '', //基盘年度
					year: '', //当前年
					carType: '', //车型
					carAge: '', //车龄
					consumptionType: '', //消费类别 
					carNum:'',
					workorderNum: '', //年均工单数
					averageCz: '', //平均单次产值 	
					yearCZ:'',
				},
				//校验规则：
				modelRule: {},
				selectarr: [],
				sectyear:''
			}
		},
		methods: {
			//查询
			AnnalOutValQuery: function() {
				if(this.$data.sectyear){
					this.$data.sectyear = this.moment(this.$data.sectyear).format("YYYY");
				}
				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/crm/average/page', //url
					params: { //发送的参数
						year: this.$data.sectyear,
						start: this.$data.CurentPage, //页码
						limit: this.$data.page.pageSize //每页的数量
					}
				}).then(function(resp) {
					debugger;
					resp.data.total = parseInt(resp.data.total);
					// es5写法
					this.$data.tableData = resp.data;
				}, function(error) {
					// error
				})
			},
			//选择年的时间变动函数
			selectYear: function() {
				this.AnnalOutValQuery();
			},
			//人工修正
			AnnalOutValEdit: function() {
				if(this.$data.selectarr.length == 1) {
					debugger;
					this.$http({
						method: 'GET',
						url: this.API_ROOT + '/crm/average/info', //url
						params: { //发送的参数
							id: this.$data.selectarr[0].id, //查询条件
						}
					}).then(function(resp) {
						this.$data.dialogform = true;
						this.$data.dataFormModelData = resp.data.data;
					}, function(error) {
						// error
					})
				} else {
					this.$message.error("请选择数据")
				}
			},
			//保存
			AnnalOutValSave: function() {
				this.$refs.datamodelForm.validate(function(valid) {
					if(valid) {
						this.$http.post(this.API_ROOT + '/crm/average/save', this.$data.dataFormModelData)
							.then(resp => {
								debugger;
								if(resp.data.success) {
									debugger;
									this.$message(resp.data.msg);
									this.AnnalOutValQuery();
									this.$data.dialogform = false;
								} else {
									this.$message.error(resp.data.msg);
								}
							}, resp => {

							});
					}
					return false;
				}.bind(this));
			},
			//生成月度目标
			createAnnalOutVal: function() {
				this.$confirm('重新测算会清除人工修正的数据，是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					//					this.$message({
					//						type: 'success',
					//						message: '删除成功!'
					//					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				});
			},
			//列表，分页大小切换
			handleSizeChange: function() {},
			//列表,当前页切换
			handleCurrentChange: function(currentPage) {
				this.$data.CurentPage = currentPage;
				//this.$data.dictGroup = '';
				this.AnnalOutValQuery();
			},
			handleSelectionChange: function(value) {
				this.$data.selectarr = value;
				if(this.$data.selectarr.length > 1) {
					this.$message.error("请选择一条数据")
				}
			},
		},
		//表单创建时执行
		created: function() {
			this.AnnalOutValQuery();
		}
	}
</script>
<!--<style>
	el-form-item {
		display: inline-block;
	}
</style>-->